<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
<h:head>
	<title>Stock Ranking</title>
	<link href="style.css" type="text/css" rel="stylesheet" />
</h:head>
<h:body onload="dlg.show()">
	<div align="right">
		<h:panelGrid columns="1" styleClass="header-panelGrid" columnClasses="header-panelGridColumn">
			<h:outputText value="Sistema Informático de Análisis Bursátil" styleClass="header-application-name"/>
			<br/>
		</h:panelGrid>
	</div>
	<h:form>
		<p:menubar>
			<p:menuitem value="" />
		</p:menubar>
	</h:form>

	<p:growl id="growl" showDetail="false" life="3000" autoUpdate="true"/>

	<p:dialog id="dialog" widgetVar="dlg" modal="true" resizable="false" closable="false">
		<h:form>
			<h:panelGrid columns="2" cellpadding="5" style="text-align: right;">
				<h:outputLabel id="lblUserName" for="txtUserName" value="Usuario: "
					style="font-size: 14px; font-family:Tahoma;font-weight: bold; color:black; text-align: right" />
				<h:inputText value="#{loginBean.username}" id="txtUserName"
					required="true" label="Usuario"
					requiredMessage="Complete el campo Usuario"
					style="font-size: 13px; font-family:Tahoma; color:black;" />
				<h:outputLabel id="lblPassword" for="txtPassword"
					value="Contraseña: "
					style="font-size: 14px; font-family:Tahoma;font-weight: bold; color:black;" />
				<h:inputSecret value="#{loginBean.password}" id="txtPassword"
					required="true" label="Contraseña"
					requiredMessage="Complete el campo Contraseña"
					style="font-size: 13px; font-family:Tahoma; color:black;" />
				<f:facet name="footer">
					<div align="center">
						<p:commandButton id="loginButton" value="Ingresar" update=":growl"
							action="#{loginBean.login}"
							style="font-size: 14px; font-family:Tahoma;color:black; text-shadow: none;background-color: #E5E5E5;"
							oncomplete="handleLoginRequest(xhr, status, args)" 
							global="true"/>
					</div>
				</f:facet>
			</h:panelGrid>
		</h:form>
	</p:dialog>
	<p:ajaxStatus>
		<f:facet name="prestart">
			<div align="right">
				<h:graphicImage library="images" value="/pages/images/ajax-loader.gif"/>
			</div>
		</f:facet>
		<f:facet name="complete">
			<h:graphicImage library="images" value="" />
		</f:facet>
	</p:ajaxStatus>
	<script type="text/javascript">
		function handleLoginRequest(xhr, status, args) {
			if (args.validationFailed || !args.loggedIn) {
				jQuery('#dialog').effect("shake", {
					times : 3
				}, 100);
			} else {
				dlg.hide();
				jQuery('#loginLink').fadeOut();
			}
		}
	</script>
</h:body>
</html>